import { Button, Dialog, Slide, Typography } from '@mui/material';
import { TransitionProps } from '@mui/material/transitions';
import { forwardRef } from 'react';

import Disbursement from '../../api/disbursement/disbursement';
import styles from '../../styles/components/index/progress-popup.module.css';

const Transition = forwardRef(function Transition(
    props: TransitionProps & {
        children: React.ReactElement<any, any>;
    },
    ref: React.Ref<unknown>
) {
    return <Slide direction="up" ref={ref} {...props} />;
});

export interface DisbursementSavedPopupProps {
    show: boolean;
    disbursement: Disbursement;
}

export default function DisbursementSavedPopup(props: DisbursementSavedPopupProps) {
    const getDisbursementID = (): string => {
        return props.disbursement ? props.disbursement.id.toString() : '';
    };

    return (
        <div>
            <Dialog
                open={props.show}
                TransitionComponent={Transition}
                keepMounted
                aria-describedby="alert-dialog-slide-description"
                className={styles['popup']}
            >
                <div className={styles['popup-content']}>
                    <Typography variant="h5" align="center">
                        Disbursement Saved Successfully
                    </Typography>

                    <Typography className="top-30" align="center">
                        We will send you an email once the disbursement is done!
                    </Typography>

                    <Button className="top-40" variant="contained" href="/" fullWidth>
                        Go to Home
                    </Button>
                    <Button
                        className="top-20"
                        variant="contained"
                        href={'/transactions/' + getDisbursementID()}
                        fullWidth
                    >
                        Visit Transactions
                    </Button>
                </div>
            </Dialog>
        </div>
    );
}
